<template>
	<view class="container">
		<image src="../../static/loginBg.png" class="bgImg"></image>
		<view class="loginBox">
			<image src="../../static/k.png" class="loginImg"></image>
			<view class="tabsBox">
				<view class="tabs">
					注册
				</view>
				<view class="content">
				  <view>
					  <view class="userLogin">
						  <view class="phone">
							  <input type="number" placeholder-class="custom-placeholder" placeholder="请输入手机号" v-model="phonenumber" />
						  </view>
						  <view class="phone">
							  <input type="text" placeholder-class="custom-placeholder" placeholder="请输入用户名" v-model="userName" />
						  </view>
						  <view class="phone">
							  <input type="text" placeholder-class="custom-placeholder" placeholder="请输入身份证号" v-model="idcard" />
						  </view>
						  <view class="phone">
							  <input type="password" placeholder-class="custom-placeholder" placeholder="请输入密码" v-model="password" />
						  </view>
						  <view class="register" @click="handleRegister">已有账号，立即登录</view>
						  <button @click="handleCodeLogin" class="login">注册</button>
					  </view>
				  </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { register } from '@/api/login.js'
	
	export default {
	  data() {
	    return {
		  url:"https://app.rwldrm.com/",
		  imgUrl:"https://img.rwldrm.com/",
	      activeIndex: 0, // 当前激活的tab索引
		  // 验证码登录
		  userName: '测试人员12',
		  phonenumber:'18294219190',
		  idcard:'620524199712201463',
		  password:'admin123',
		  idcardFront:'123',
		  idcardBack:'456',
		  loginIp: '127.0.0.1',
		  // 用户名登录
		  user:{},
	    };
	  },
	  methods: {
	    switchTab(index) {
	      this.activeIndex = index;
		  this.checkbox = false
	    },
			// 登录按钮
			handleCodeLogin(){
				// 调用登录接口
				let data = {
					"userName":this.userName,
					"phonenumber":this.phonenumber,
					"idcard":this.idcard,
					"password":this.password,
					"idcardFront":this.idcardFront,
					"idcardBack":this.idcardBack,
					"loginIp":this.loginIp
				}
				register(data).then((res) => {
					if(res.code==200){
						uni.showToast({
							title: '注册成功',
							icon: 'success',
						});
						uni.navigateTo({
						  url: '/pages/login/login',
						});
					}
				  })
			},
			handleRegister(){
				uni.navigateTo({
				  url: '/pages/login/login',
				  });
			},
	  },
	};
</script>

<style>
	.bgImg{
		width: 100%;
		height: 100vh;
		position: relative;
	}
	
	.loginBox{
		position: absolute;
		top: 50%;
		left: 50%;
		right: 50%;
		bottom: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		margin: 0 auto;
		height: 857rpx;
	}
	
	.loginImg{
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.tabsBox{
		position: absolute;
		top: 0;
		padding: 40rpx;
		width: 89%;
	}
	
	.tabs {
		text-align: center;
		color: #05bdfd;
		font-size: 35rpx;
	}
	 
	.tab-item {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-bottom: 1px solid #fff;
	  padding: 10px 0;
	  cursor: pointer;
	  font-size: 26rpx;
	}
	 
	.tab-item.active {
	  border-color: #05bdfd;
	  color: #05bdfd;
	}
	
	.content {
	  margin-top: 10px;
	}
	
	.userLogin input{
		padding: 10rpx;
		border-bottom: 1px solid #e5e5e5;
		margin: 30rpx 0;
		font-size: 25rpx;
	}
	
	.custom-placeholder {
		font-size: 25rpx;
	}
	
	.login{
		background-color: #05bdfd;
		font-size: 30rpx;
		color: #fff;
	}
	
	.register{
		font-size: 26rpx;
		color: red;
		margin-bottom: 30rpx;
		text-align: right;
	}
	
	.code{
		display: flex;
	}
	
	.codeInput{
		width: 76%;
	}
	
	.code text{
		font-size: 24rpx;
		line-height: 122rpx;
		color: #05bdfd;
	}
	
	.wyyd{
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}
	
	.wyyd text{
		color: #05bdfd;
	}
</style>